<template>
  <div>
    <search-order ref="searchOrder" @search="search" @output="output"></search-order>
    <div class="pageBox">
      <el-pagination
        background
        layout="total"
        :total="total"
        style="display:inline-block;vertical-align: top;"
      ></el-pagination>
      <!-- <el-button type="success" size="small" icon="el-icon-circle-plus" @click="add">新增</el-button>
      <el-button type="info" size="small" plain icon="el-icon-tickets">导出表格</el-button>-->
    </div>
    <div class="tableBox">
    <el-table
        :cell-style="{padding: '5px 0'}"
        stripe
        :data="tableData"
        border
        tooltip-effect="dark"
        style="width: 100%"
        height="px"
      >
      <el-table-column prop="orderID" align="center" label="订单号" width="70"></el-table-column>
      <el-table-column prop="name" align="center" label="商品名称" width="120px"></el-table-column>
      <!-- <el-table-column prop="priceID" align="center" label="规格组"></el-table-column> -->
      <el-table-column prop="createTime" align="center" label="成单时间" width="160px"></el-table-column>
      <!-- <el-table-column prop="type" align="center" label="授课类型"></el-table-column> -->
      <el-table-column prop="status" align="center" label="订单状态">
        <template slot-scope="scope">
            <el-tag size="small" v-if="scope.row.refundStatus===0">申请退款</el-tag>
            <el-tag  size="small" v-else-if="scope.row.refundStatus===1">已退款</el-tag>
            <el-tag  size="small" v-else-if="scope.row.refundStatus===2">已完成</el-tag>
            <el-tag  size="small" v-else-if="scope.row.refundStatus===3">新订单</el-tag>
          </template>
      </el-table-column>
      <el-table-column prop="instantPrice" align="center" label="实际单价(元)"></el-table-column>
      <el-table-column prop="mobile" align="center" label="买家手机号" width="120px"></el-table-column>
      <el-table-column prop="nickName" align="center" label="买家昵称"></el-table-column>
      <el-table-column prop="groupBuyID" align="center" label="是否团购">
        <template slot-scope="scope">
            <el-tag size="small" v-if="scope.row.groupBuyID===0">不是</el-tag>
            <el-tag  size="small" v-else-if="scope.row.groupBuyID===1">是</el-tag>
          </template>
      </el-table-column>
      <el-table-column prop="belongToCompany" align="center" label="合作机构"></el-table-column>
      <el-table-column   label="操作" width="520px">
        <template slot-scope="scope">
          <el-button size="mini" type="success" @click="detail(scope.row.orderID)">详情</el-button>
          <el-button size="mini" type="success" @click="setRefundStatus(scope.row.orderID,1)">退款</el-button>
          <el-button size="mini" type="success" @click="deleteGroup(scope.row.orderID)">删除</el-button>
          <el-button size="mini" type="success" @click="edit(scope.row)">修改</el-button>
          <el-button size="mini" type="success" v-if="scope.row.postStatus===2" @click="addLogistic(scope.row)">添加物流</el-button>
          <el-button size="mini" type="success" v-if="scope.row.refundStatus===3" @click="finishOrder(scope.row.orderID,2)">完成</el-button>
        </template>
      </el-table-column>
    </el-table>
    </div>
    <el-dialog title="编辑" :visible.sync="dialog1" width="450px" :modal-append-to-body="false">
      <el-form :model="form1"  ref="form1" label-width="110px">
      <el-form-item label="是否有效" prop="isValid">
                        <el-select v-model="form1.isValid" placeholder="请选择是否有效">
                          <template v-for="item in optionList">
                           <el-option
                            :label="item.name"
                            :key="item.value"
                            :value="item.value"
                            v-if="item.value==form1.isPersonalDistributor"
                            selected
                           >
                          </el-option>
                          <el-option
                            :label="item.name"
                            :key="item.value"
                            :value="item.value"
                            v-else
                           >
                            </el-option>
                          </template>
                        </el-select>
                        
        </el-form-item>
        <el-form-item label="是否已邮寄" prop="postStatus">
                        <el-select v-model="form1.postStatus" placeholder="请选择邮寄状态">
                           <template v-for="item in postList">
                           <el-option
                            :label="item.name"
                            :key="item.value"
                            :value="item.value"
                            v-if="item.value==form1.postStatus"
                            selected
                           >
                          </el-option>
                          <el-option
                            :label="item.name"
                            :key="item.value"
                            :value="item.value"
                            v-else
                           >
                          </el-option>
                          </template>
                        </el-select>
                        
        </el-form-item>
      <el-form-item class="form-btns">
                <el-button type="primary" @click="submitEdit">提交</el-button>
                <el-button @click="dialog1 = false">取 消</el-button>
      </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="添加物流" :visible.sync="dialog2" width="450px" :modal-append-to-body="false">
      <el-form :model="form2"  ref="form2" label-width="110px">
      <el-form-item label="快递名称" prop="postCompanyName">
      <el-input v-model="form2.postCompanyName" placeholder="请输入快递名称"></el-input>
      </el-form-item>
      <el-form-item label="快递编号" prop="postNumber">
      <el-input v-model="form2.postNumber" placeholder="请输入快递编号"></el-input>
      </el-form-item>
      <el-form-item class="form-btns">
                <el-button type="primary" @click="submitLogistic">提交</el-button>
                <el-button @click="dialog2 = false">取 消</el-button>
      </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      class="dialog"
      title="订单详情"
      width="750px"
      top="8vh"
      :visible.sync="dialog"
      :modal-append-to-body="false"
    >
    <div class="row">
      <div class="row-item">
        <div class="key">订单ID</div>
        <div class="value">{{item.orderID}}</div>
      </div>
      <div class="row-item">
        <div class="key">商品名称</div>
        <div class="value">{{item.name}}</div>
      </div>
    </div>
    <div class="row">
      <div class="row-item">
        <div class="key">规格组</div>
        <div class="value">{{item.priceID}}</div>
      </div>
      <div class="row-item">
        <div class="key">成单时间</div>
        <div class="value">{{item.createTime}}</div>
      </div>
    </div>
    <div class="row">
      <div class="row-item">
        <div class="key">实际单价</div>
        <div class="value">{{item.instantPrice}}</div>
      </div>
      <div class="row-item">
        <div class="key">买家手机号</div>
        <div class="value">{{item.mobile}}</div>
      </div>
    </div>
    <div class="row">
      <div class="row-item">
        <div class="key">昵称</div>
        <div class="value">{{item.nickName}}</div>
      </div>
      <div class="row-item">
        <div class="key">数量</div>
        <div class="value">{{item.numberOfProduct}}</div>
      </div>
    </div>
    <div class="row">
      <div class="row-item">
        <div class="key">总价</div>
        <div class="value">{{item.totalAmount}}</div>
      </div>
      <div class="row-item">
        <div class="key">合作机构</div>
        <div class="value">{{item.belongToCompany}}</div>
      </div>
    </div>
    </el-dialog>
  </div>
</template>

<script>
import SearchOrder from '@/components/SearchOrder'
import { queryOrders,finishOrder,getAllOrders, deleteGroup,getOrderDetail,setPostInfo,setOrderStatus,setRefundStatus } from '@/api'

export default {
  name: 'user',
  components: {
    SearchOrder
  },
  data() {
    return {
      dialog: false,
      total: 0,
      tableData: [],
      item: {},
      dialog1: false,
      dialog2: false,
      total: 0,
      form1:{},
      form2:{},
      tableData: [],
      optionList:[{name:'是',value:0},{name:'否',value:1}],
      postList:[{name:'不需邮寄',value:0},{name:'已邮寄',value:1},{name:'未邮寄',value:2}]
    }
  },
  created() {
    this.getData()
    window.vue = this
  },
  methods: {
    getData() {
      getAllOrders({
        startTime: this.$moment().subtract('days', 7).format('YYYY-MM-DD HH:mm:ss'),
        endTime: this.$moment().format('YYYY-MM-DD HH:mm:ss')
      }).then(res => {
        this.tableData = res
        this.total = res.length
        console.log(res[0])
      })
    },
    deleteGroup(id) {
      deleteGroup(id).then(res => {
        this.getData()
      })
    },
    detail(id) {
      getOrderDetail(id).then(res => {
        this.item = res
        this.dialog = true
        console.log(res)
      })

    },
    search(data) {
      queryOrders(data).then((res) => {
        this.total = res.length
        this.tableData = res
      })
    },
    output() {

    },
    finishOrder(id,status){
       finishOrder({orderID:id,refundStatus:status}).then(res => {
          this.$message({
            message: '完成订单',
            type: 'success'
          })
          this.getData()
        })
    },
    setRefundStatus(id,status){
       setRefundStatus({orderID:id,refundStatus:status}).then(res => {
          this.$message({
            message: '退款成功',
            type: 'success'
          })
          this.getData()
        })
    },
    edit(row) {
      this.form1=row
      this.dialog1=true
    },
    submitEdit(){
       setOrderStatus(this.form1).then(res => {
          this.$message({
            message: '编辑完成',
            type: 'success'
          })
          this.getData()
          this.dialog1 = false
        })
    },
    addLogistic(row) {
      this.form2=row
      this.dialog2=true
    },
    submitLogistic(){
       setPostInfo(this.form2).then(res => {
          this.$message({
            message: '已添加物流',
            type: 'success'
          })
          this.getData()
          this.dialog2 = false
        })
    }
  }
  
}
</script>

<style scope lang="stylus" rel="stylesheet/stylus">
@import '../style/mixin.styl'
.row
  width 100%
  flex-row()
  .row-item
    flex 1
    line-height 30px
    display flex
    .key
      margin-right 10px
    .value
      color #f90
.el-table--fit 
  height: calc(100vh - 145px)
.el-date-editor
  width 300px
  margin 0 10px
</style>